<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <script src="../js/vue.js"></script>
</head>
<body>

<!--
    v-bind:    单向数据绑定     只能data中的数据影响页面中的显示  页面中数据的改变不会影响data中的值
    v-model    双向数据绑定   data中的数据和页面中展示的数据互相影响
    form表单
        表单组件   input

        书写形式的简化
        v-model:value=""    =>  v-model=""
-->
<div id="app">

  <form action="#" method="get">
    <p><input  type="text" name="username"     v-model:value="user.username"></p>
    <p><input  type="password" name="password" v-model="user.password"></p>
    <p><button @click="submit">提交</button></p>
  </form>

</div>

<script>
  let vm = new Vue({
      el:'#app',
      data:{
        user:{
          username:'root',
          password:'123456'
        }
      },
      methods:{
        submit(){
           alert(JSON.stringify(this.user))
        }
      }
    })
</script>
</body>
</html>